<template>
  <div>
    <CategorySelector></CategorySelector>
    <el-card style="margin: 20px">
      <SpuList v-if="showState === 1" @setShowState="setShowState"></SpuList>
      <SpuForm
        v-if="showState === 2"
        :spu="spu"
        @setShowState="setShowState"
      ></SpuForm>
      <SkuForm
        v-if="showState === 3"
        @setShowState="setShowState"
        :spu="spu"
      ></SkuForm>
    </el-card>
  </div>
</template>

<script>
import SpuList from "@/views/product/spu/SpuList";
import SpuForm from "@/views/product/spu/SpuForm";
import SkuForm from "@/views/product/spu/SkuForm";
export default {
  name: "",
  components: {
    SpuList,
    SpuForm,
    SkuForm,
  },
  data() {
    return {
      showState: 1,
      spu: {
        category3Id: "",
        description: "",
        tmId: "",
        spuName: "",
        spuImageList: [],
        spuSaleAttrList: [],
      }, //存储spu  需要传给spuForm
    };
  },
  methods: {
    // 切换到不同子组件
    setShowState(num, row) {
      this.showState = num;
      // 判断是添加还是修改
      if (row) {
        //修改 spu 或者添加sku
        this.spu = row;
      } else {
        //添加
        // 点击修改之后取消 再次点击添加要清空数据
        this.spu = {
          category3Id: "",
          description: "",
          tmId: "",
          spuName: "",
          spuImageList: [],
          spuSaleAttrList: [],
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
